import { TableCustom } from '@vh-admin/pro-components';
import ProCard from '@ant-design/pro-card';
import ProDescriptions from '@ant-design/pro-descriptions';
import { useState } from 'react';
import { columnsFn } from './define';
import { logDetails, logExport, logIndex } from '@/services/sys/log';

function SysLogs() {
  const [record, setRecord] = useState<any>({ param: '', data: '' });
  const [tab, setTab] = useState<string>('param');
  const [loading, setLoading] = useState<boolean>(false);

  const rowOnClick = async (rowRecord: any) => {
    setLoading(true);
    try {
      const res: any = await logDetails({ id: rowRecord.id });
      setRecord(res.data);
      setLoading(false);
    } catch (error) {
      setLoading(false);
    }
  };

  return (
    <>
      <ProCard split="vertical" ghost gutter={[8, 8]}>
        <ProCard colSpan="70%" ghost>
          <TableCustom<any>
            request={logIndex}
            columns={columnsFn()}
            onRow={(rowRecord: any) => {
              return {
                onClick: () => rowOnClick(rowRecord),
              };
            }}
            headerTitleConfig={{
              export: {
                text: '导出日志',
                modalConfig: {
                  modalType: 'Download',
                  edit: false,
                  config: {
                    title: '导出日志',
                    searchParams: true,
                    submitRequest: logExport,
                  },
                },
              },
            }}
          />
        </ProCard>
        <ProCard
          split="horizontal"
          headerBordered
          tabs={{
            activeKey: tab,
            onChange: (key) => {
              setTab(key);
            },
            items: [
              {
                label: `请求参数`,
                key: 'param',
                children: (
                  <>
                    <ProDescriptions
                      loading={loading}
                      dataSource={record}
                      style={{ height: 'calc(100vh - 292px)', overflow: 'auto' }}
                    >
                      <ProDescriptions.Item valueType="jsonCode" dataIndex="param" />
                    </ProDescriptions>
                  </>
                ),
              },
              {
                label: `返回数据`,
                key: 'data',
                children: (
                  <>
                    {' '}
                    <ProDescriptions
                      dataSource={record}
                      loading={loading}
                      style={{ height: 'calc(100vh - 292px)', overflow: 'auto' }}
                    >
                      <ProDescriptions.Item valueType="jsonCode" dataIndex="data" />
                    </ProDescriptions>
                  </>
                ),
              },
            ],
          }}
        />
      </ProCard>
    </>
  );
}

export default SysLogs;
